<style lang="less">
  .dashboard_zoom {
    height: 100%;
  }

  .dashboard {
    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px #00bbec inset;
    }
    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px #00bbec inset;
    }
    background: url("../../assets/dashboard/bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .el-radio-button__inner, .el-button {
      color: #00bbec;
      background-color: #101535;
    }
    .fa-arrow-down:before {
      font-size: 18px;
    }
    .fa-arrow-down {
      margin-left: 20px;
      font-size: 12px;
      color: green;
    }
    .fa-arrow-up:before {
      font-size: 18px;
    }
    .fa-arrow-up {
      margin-left: 20px;
      font-size: 12px;
      color: #ff6600;
    }
    .fa-expand {
      font-size: 25px;
      color: #00bbec;
      position: absolute;
      right: 34px;
      z-index: 100;
      cursor: pointer;
    }
    .fa-compress {
      font-size: 25px;
      color: #00bbec;
      position: absolute;
      right: 0px;
      z-index: 100;
      cursor: pointer;
    }
    div {
      z-index: 99;
    }
    .label_txt {
      font-size: 18px;
      color: #00bbec;
    }
    .label_num {
      font-size: 30px;
      color: white;
      div {
        display: inline-block;
        width: 180px;
        text-align: right;
      }
    }
    .label_num_center {
      text-align: center;
      font-size: 18px;
    }
    .more_txt {
      font-size: 16px;
      float: right;
      color: green;
    }
    .label_title {
      padding: 16px 14px 0 16px;
    }
    .dashboard_header {
      line-height: 100px;
      text-align: center;
      height: 100px;
      font-size: 30px;
      color: white;
      span {
        color: #00bbec;
        font-size: 50px;
        padding: 5px;
        margin: 0 10px 0 10px;
        border: 1px #00bbec solid;
        border-radius: 10px;
        box-shadow: 0 0 10px #00bbec;
      }
    }
    > .center {
      flex: 1;
      display: flex;
      > div:first-child {
        height: 100%;
        width: 400px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        > div {
          padding: 18px 0 10px 54px;
          margin-bottom: 10px
        }
        > div:first-child {
          background: url("../../assets/dashboard/1.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:nth-child(2) {
          background: url("../../assets/dashboard/2.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:nth-child(3) {
          background: url("../../assets/dashboard/3.png") no-repeat;
          background-size: 100% 100%;
        }
        > div:last-child {
          flex: 1;
          padding: 0px;
          display: flex;
          min-height: 300px;
          flex-direction: column;
          background: url("../../assets/dashboard/4.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 0px;
          .el-radio-group {
            margin: 20px 16px 0 16px;
          }
          #a1 {
            flex: 1;
            padding: 10px;
          }
        }
      }

      > .dashboard_main {
        background: url("../../assets/dashboard/5.png") no-repeat;
        background-size: 100% 100%;
        flex: 1;
        display: flex;
        #map {
          flex: 1;
        }
      }
      > div:last-child {
        height: 100%;
        width: 400px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        > div {
          min-height: 250px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          padding: 10px;
          div:last-child {
            flex: 1;
          }
          background: url("../../assets/dashboard/4.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    > div:last-child {
      height: 150px;
      margin-top: 10px;
      background: url("../../assets/dashboard/8.png") no-repeat;
      background-size: 100% 100%;
      .el-col-label {
        padding: 10px 0;
      }
      .el-col-border {
        border-left: 1px white solid;
        border-right: 1px white solid;
      }
      > .el-col {
        .el-col-title {
          height: 40px;
          line-height: 40px;
          padding-left: 50px;
          .el-button {
            float: right;
          }
        }
        .el-col-title_0 {
          background: url("../../assets/dashboard/line.png") no-repeat;
          background-size: 40px;
        }
        .el-col-title_1 {
          background: url("../../assets/dashboard/TheDriver.png") no-repeat;
          background-size: 40px;
        }
        .el-col-title_2 {
          background: url("../../assets/dashboard/partner.png") no-repeat;
          background-size: 40px;
        }
        height: 100%;
        padding: 20px 50px 15px 50px;
      }
      > .el-col:nth-child(2) {
        .el-col-title {
          margin: 0 50px 0 50px;
        }
        padding: 20px 0px 15px 0px;
      }
      .el-col-label_1 {
        .el-col {
          padding-right: 38px;
        }
      }
    }
  }
</style>

<template>
  <div class="dashboard" :class="$store.state.fullScreen?'dashboard_zoom':''">
    <i class="fa" :class="$store.state.fullScreen?'fa-compress':'fa-expand'" @click="fullScreen"></i>
    <div class="dashboard_header">全国实时发货货量(天)<span>{{wholeShipment.realTimeShipment}}</span>票</div>
    <div class="center">
      <div>
        <div>
          <div class="label_txt">累计发货客户数</div>
          <div class="label_num">{{wholeShipment.cumulativeCustomer}} <span class="label_txt">人</span></div>
        </div>

        <div>
          <div class="label_txt">累计发货总量</div>
          <div class="label_num">{{wholeShipment.cumulativeShipments.totalAmount.toFixed(2)}} <span
            class="label_txt">件</span></div>
          <div class="label_txt">累计重量:
            <span class="label_num">
                            <div>{{wholeShipment.cumulativeShipments.totalWeight.toFixed(2)}}</div>
                        </span>吨
          </div>
          <div class="label_txt">累计体积:
            <span class="label_num"><div>{{wholeShipment.cumulativeShipments.totalVolume.toFixed(2)}}</div></span>方
          </div>
        </div>

        <div>
          <div class="label_txt">累计优惠总额</div>
          <div class="label_num">{{wholeShipment.cumulativeDiscount.toFixed(2)}} <span class="label_txt">元</span></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">发货量统计图</span><span class="more_txt">更多></span></div>
          <el-radio-group v-model="shipmentStatisticsType">
            <el-radio-button label="DAY">每日</el-radio-button>
            <el-radio-button label="WEEK">每周</el-radio-button>
            <el-radio-button label="MONTH">每月</el-radio-button>
          </el-radio-group>
          <div id="a1"></div>
        </div>
      </div>
      <div class="dashboard_main">
        <div id="map"></div>
      </div>
      <div>
        <div>
          <div class="label_title"><span class="label_txt">全国发货量TOP8(票)</span><span class="more_txt">更多></span></div>
          <div id="qgfhl"></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">事业合伙人周收益TOP5(元)</span><span class="more_txt">更多></span></div>
          <div id="syhfr"></div>
        </div>
        <div>
          <div class="label_title"><span class="label_txt">网点周收益TOP5(元)</span><span class="more_txt">更多></span></div>
          <div id="dot"></div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_0">
          全国专线数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label">
          <el-col :span="12" class="label_num label_num_center">
            专线数(条)
            <i class="fa"
               :class="lineStatistics.linePercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{lineStatistics.linePercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            发车量(车)
            <i class="fa"
               :class="lineStatistics.vehiclePercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{lineStatistics.vehiclePercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{lineStatistics.lineNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{lineStatistics.vehicleNum}}
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_1">
          全国短驳司机数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label el-col-border">
          <el-col :span="12" class="label_num label_num_center">
            司机数(人)<i class="fa"
                     :class="shortTaskStatistics.driverPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{shortTaskStatistics.driverPercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            接单量(单)<i class="fa"
                     :class="shortTaskStatistics.taskPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{shortTaskStatistics.taskPercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{shortTaskStatistics.driverNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{shortTaskStatistics.taskNum}}
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="8">
        <div class="el-col-title label_txt el-col-title_2">
          全国事业合伙人数据统计
          <el-button>查看明细</el-button>
        </div>
        <el-col :span="24" class="el-col-label">
          <el-col :span="12" class="label_num label_num_center">
            合伙人(人)<i class="fa"
                     :class="partnerStatistics.partnerPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{partnerStatistics.partnerPercentage.toFixed(2) * 100}}%</i>
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            收益额(元)<i class="fa"
                     :class="partnerStatistics.partnerAmountPercentage>=0?'fa-arrow-up':'fa-arrow-down'">{{partnerStatistics.partnerAmountPercentage.toFixed(2) * 100}}%</i>
          </el-col>
        </el-col>
        <el-col :span="24" class="el-col-label_1">
          <el-col :span="12" class="label_num label_num_center">
            {{partnerStatistics.partnerNum}}
          </el-col>
          <el-col :span="12" class="label_num label_num_center">
            {{partnerStatistics.partnerAmountNum.toFixed(2)}}
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import geoCoordMap from '../../lib/echarts/area';
import {
  wholeShipment,
  shipmentStatistics,
  lineStatistics,
  cityDeliveringAmount,
  cityTop,
  partnerTop,
  dotTop,
  partnerStatistics,
  shortTaskStatistics
} from '../../api/order/dashboard';

export default{
  data () {
    return {
      wholeShipment: {
        'realTimeShipment': 0,
        'cumulativeShipments': {
          'totalAmount': 0,
          'totalVolume': 0.0,
          'totalWeight': 0.0
        },
        'cumulativeCustomer': 0,
        'cumulativeDiscount': 0.0
      },
      shipmentStatistics: {
        x: [],
        y: []
      },
      cityTop: {
        x: [],
        y: []
      },
      partnerTop: {
        x: [],
        y: []
      },
      dotTop: {
        x: [],
        y: []
      },
      shipmentStatisticsType: 'DAY',
      chart: {
        shipmentStatisticsChart: null,
        cityTopChart: null,
        partnerTopChart: null,
        dotTopChart: null
      },
      lineStatistics: {
        'linePercentage': 0,
        'lineNum': 0,
        'vehicleNum': 0,
        'vehiclePercentage': 0
      },
      shortTaskStatistics: {
        'driverNum': 0,
        'taskPercentage': 0,
        'driverPercentage': 0,
        'taskNum': 0
      },
      partnerStatistics: {
        'partnerPercentage': 0,
        'partnerAmountPercentage': 0,
        'partnerAmountNum': 0,
        'partnerNum': 0
      },
      cityDeliveringAmount: [],
      shipments_city: null
    };
  },
  methods: {
    wholeShipmentLoad () {
      wholeShipment().then(res => {
        if (res.data.successFlg) {
          this.wholeShipment = res.data.obj;
        }
      });
    },
    shipmentStatisticsLoad (type) {
      shipmentStatistics(type).then(res => {
        let x = [];
        let y = [];
        if (res.data.successFlg) {
          res.data.detailModelList.forEach(item => {
            x.push(item.x);
            y.push({value: item.totalAmount, totalVolume: item.totalVolume, totalWeight: item.totalWeight});
          });
          this.shipmentStatistics.x = x;
          this.shipmentStatistics.y = y;
        }
      });
    },
    lineStatisticsLoad () {
      lineStatistics().then(res => {
        if (res.data.successFlg) {
          this.lineStatistics = res.data.obj;
        }
      });
    },
    shortTaskStatisticsLoad () {
      shortTaskStatistics().then(res => {
        if (res.data.successFlg) {
          this.shortTaskStatistics = res.data.obj;
        }
      });
    },
    cityTopLoad () {
      cityTop(8).then(res => {
        if (res.data.successFlg) {
          let x = [];
          let y = [];
          if (res.data.detailModelList.length > 0) {
            this.shipments_city = res.data.detailModelList[0].shipments_city;
            this.cityDeliveringAmountLoad(res.data.detailModelList[0].shipments_city_id);
          }
          res.data.detailModelList.forEach(item => {
            x.push(item.shipments_city);
            y.push({value: item.num, shipments_city_id: item.shipments_city_id, shipments_city: item.shipments_city});
          });
          this.cityTop.x = x;
          this.cityTop.y = y;
        }
      });
    },
    partnerTopLoad () {
      partnerTop(5).then(res => {
        if (res.data.successFlg) {
          let x = [];
          let y = [];
          if (res.data.successFlg) {
            res.data.detailModelList.forEach(item => {
              x.push(item.real_name);
              y.push(item.num.toFixed(2));
            });
            this.partnerTop.x = x;
            this.partnerTop.y = y;
          }
        }
      });
    },
    dotTopLoad () {
      dotTop(5).then(res => {
        if (res.data.successFlg) {
          let x = [];
          let y = [];
          if (res.data.successFlg) {
            res.data.detailModelList.forEach(item => {
              x.push(item.name);
              y.push(item.num.toFixed(2));
            });
            this.dotTop.x = x;
            this.dotTop.y = y;
          }
          console.log(this.dotTop);
        }
      });
    },
    cityDeliveringAmountLoad (cityId) {
      cityDeliveringAmount(cityId).then(res => {
        if (res.data.successFlg) {
          this.cityDeliveringAmount = res.data.detailModelList;
        }
      });
    },
    partnerStatisticsLoad () {
      partnerStatistics().then(res => {
        if (res.data.successFlg) {
          this.partnerStatistics = res.data.obj;
        }
      });
    },
    fullScreen () {
      this.$store.commit('fullScreen');
      this.$router.push(this.$store.state.fullScreen ? '/full_screen' : '/dashboard/dashboard');
    },
    load () {
      let self = this;
      this.chart.shipmentStatisticsChart = echarts.init(document.getElementById('a1'), {width: 'auto'});

      this.chart.cityTopChart = echarts.init(document.getElementById('qgfhl'), {
        width: 'auto'
      });
      this.chart.cityTopChart.on('click', function (obj) {
        self.shipments_city = obj.data.shipments_city;
        self.cityDeliveringAmountLoad(obj.data.shipments_city_id);
      });
      this.chart.partnerTopChart = echarts.init(document.getElementById('syhfr'), {
        width: 'auto'
      });
      this.chart.dotTopChart = echarts.init(document.getElementById('dot'), {
        width: 'auto'
      });
      this.chart.cityDeliveringAmountChart = echarts.init(document.getElementById('map'), {
        width: 'auto'
      });
    },
    init () {
      this.wholeShipmentLoad();
      this.shipmentStatisticsLoad(this.shipmentStatisticsType);
      this.lineStatisticsLoad();
      this.shortTaskStatisticsLoad();
      this.cityTopLoad();
      this.partnerTopLoad();
      this.dotTopLoad();
      this.partnerStatisticsLoad();
    }
  },
  watch: {
    shipmentStatisticsType (type) {
      this.shipmentStatisticsLoad(type);
    },
    'shipmentStatistics.x': {
      handler (val) {
        this.chart.shipmentStatisticsChart.setOption({
          grid: {
            top: 20,
            left: 30,
            right: 30,
            bottom: 20,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter (item) {
              let o = item[0];
              return o.data.value + ' 件<br/>' + o.data.totalWeight + ' 吨<br/>' + o.data.totalVolume + ' 方';
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: val.length ? val : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            axisLine: {
              lineStyle: {
                color: 'yellow'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'yellow'
              }
            }
          },
          series: [
            {
              name: '发货量',
              type: 'line',
              data: this.shipmentStatistics.y
            }
          ]
        });
      },
      deep: true
    },
    'cityTop.x': {
      handler (val) {
        this.chart.cityTopChart.setOption({
          color: ['#50bbde'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
          },
          yAxis: {
            type: 'category',
            inverse: true,
            data: val,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter (val, index) {
                return (index + 1) + '. ' + val;
              }
            }
          },
          series: [
            {
              name: '票数',
              type: 'bar',
              barMaxWidth: 22,
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  textStyle: {
                    color: 'white'
                  }
                }
              },
              data: this.cityTop.y
            }
          ]
        });
      },
      deep: true
    },
    'partnerTop.x': {
      handler (val) {
        this.chart.partnerTopChart.setOption({
          color: ['#8c91dc'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
          },
          yAxis: {
            type: 'category',
            inverse: true,
            data: val,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter (val, index) {
                return (index + 1) + '. ' + val;
              }
            }
          },
          series: [
            {
              name: '金额',
              type: 'bar',
              barMaxWidth: 22,
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  textStyle: {
                    color: 'white'
                  }
                }
              },
              data: this.partnerTop.y
            }
          ]
        });
      },
      deep: true
    },
    'dotTop.x': {
      handler (val) {
        this.chart.dotTopChart.setOption({
          color: ['#8c91dc'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
          },
          yAxis: {
            type: 'category',
            inverse: true,
            data: val,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter (val, index) {
                return (index + 1) + '. ' + val;
              }
            }
          },
          series: [
            {
              name: '金额',
              type: 'bar',
              barMaxWidth: 22,
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  textStyle: {
                    color: 'white'
                  }
                }
              },
              data: this.dotTop.y
            }
          ]
        });
      },
      deep: true
    },
    cityDeliveringAmount (data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = geoCoordMap[this.shipments_city];
        let toCoord = geoCoordMap[dataItem.send_city];
        if (fromCoord && toCoord) {
          res.push({
            fromName: this.shipments_city,
            toName: dataItem.send_city,
            coords: [fromCoord, toCoord]
          });
        }
      }
      this.chart.cityDeliveringAmountChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
          zoom: 1.2,
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#101535',
              borderColor: '#00bbec'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [{
          name: 'Top10',
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
          },
          lineStyle: {
            normal: {
              color: '#a6c84c',
              width: 0,
              curveness: 0.2
            }
          },
          data: res
        }, {
          name: 'Top10',
          type: 'lines',
          zlevel: 2,
          symbol: ['none', 'arrow'],
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbolSize: 15
          },
          lineStyle: {
            normal: {
              color: '#a6c84c',
              width: 1,
              opacity: 0.6,
              curveness: 0.2
            }
          },
          data: res
        }, {
          name: 'Top10',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 8;
          },
          itemStyle: {
            normal: {
              color: 'orange'
            }
          },
          data: data.map(function (dataItem) {
            let coordMap = geoCoordMap[dataItem.send_city];
            return {
              name: dataItem.send_city,
              value: coordMap.concat([dataItem.num])
            };
          })
        }]
      });
    }
  },
  mounted () {
    this.load();
    this.init();
    var self = this;
    window.onresize = function () {
      self.chart.shipmentStatisticsChart.resize();
      self.chart.cityDeliveringAmountChart.resize();
      self.chart.cityTopChart.resize();
      self.chart.partnerTopChart.resize();
    };
    window.dashboartInterval = window.setInterval(function () {
      self.init();
    }, 600000);
  }
};
</script>
